<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="GameDev Hub - A platform for game developers to collaborate, learn, and showcase amazing games.">
<meta name="keywords" content="game development, game dev, gaming, game design, game dev platform">
<meta name="author" content="GameDev Hub">
<title>RHub - Unleash Your Creativity</title>
<script>
function scrollToSection(sectionId) {
document.getElementById(sectionId).scrollIntoView({ behavior: "smooth" });
}
function handleSubmit(e) {
e.preventDefault();
alert('Thank you for contacting GameDev Hub! We’ll get back to you soon.');
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('contactForm').addEventListener('submit', handleSubmit);
});
</script>
</head>
<body style="margin: 0; font-family: 'Arial', sans-serif; color: #fff; background-color: #1e1e2f;">
<!-- Hero Section -->
<header
style="position: relative; text-align: center; background: linear-gradient(135deg, #6a11cb, #2575fc); height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden;">
<nav
style="position: fixed; top: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: rgba(0, 0, 0, 0.8); color: white; z-index: 100;">
<h1 style="font-size: 1.5rem; margin: 0;">GameDev Hub</h1>
<div class="menu-toggle" onclick="toggleMenu()"
style="display: none; font-size: 1.5rem; cursor: pointer; padding-right: 15px;">☰</div>
<ul class="menu" style="list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0;">
<li><a href="#about" style="text-decoration: none; color: white; font-weight: bold;">About</a></li>
<li><a href="#games" style="text-decoration: none; color: white; font-weight: bold;">Games</a></li>
<li><a href="#team" style="text-decoration: none; color: white; font-weight: bold;">Team</a></li>
<li><a href="#contact" style="text-decoration: none; color: white; font-weight: bold;">Contact</a></li>
</ul>
</nav>
<div style="z-index: 1;">
<h2 style="font-size: 3rem; margin: 0; color: white;">Unleash Your Creativity</h2>
<p style="font-size: 1.25rem; margin: 1rem 0; color: white;">Create, explore, and share amazing games.</p>
<button
style="padding: 0.75rem 2rem; background-color: #f90; border: none; font-size: 1rem; cursor: pointer; border-radius: 5px;"
onclick="scrollToSection('about')">Get Started</button>
</div>
</header>
<script>
// Toggle the mobile menu
function toggleMenu() {
const menu = document.querySelector('.menu');
if (menu.style.display === "none" || menu.style.display === "") {
menu.style.display = "flex";
menu.style.flexDirection = "column";
menu.style.gap = "1rem";
menu.style.position = "absolute";
menu.style.top = "70px";
menu.style.right = "2rem";
menu.style.background = "rgba(0, 0, 0, 0.9)";
menu.style.padding = "1rem";
menu.style.borderRadius = "5px";
} else {
menu.style.display = "none";
}
}
// Scroll to section
function scrollToSection(sectionId) {
const section = document.getElementById(sectionId);
if (section) {
section.scrollIntoView({ behavior: 'smooth' });
}
}
// Change navbar background on scroll
window.addEventListener('scroll', () => {
const nav = document.querySelector('nav');
if (window.scrollY > 50) {
nav.style.background = "rgba(0, 0, 0, 1)";
} else {
nav.style.background = "rgba(0, 0, 0, 0.8)";
}
});
// Responsive styles
window.addEventListener('resize', () => {
const menuToggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('.menu');
if (window.innerWidth <= 768) {
menuToggle.style.display = "block";
menu.style.display = "none";
} else {
menuToggle.style.display = "none";
menu.style.display = "flex";
}
});
// Initialize responsive styles on load
window.addEventListener('load', () => {
const menuToggle = document.querySelector('.menu-toggle');
if (window.innerWidth <= 768) {
menuToggle.style.display = "block";
document.querySelector('.menu').style.display = "none";
}
});
</script>
<!-- About Section -->
<section id="about" style="padding: 4rem 2rem; text-align: center;">
<h2 style="font-size: 2rem; margin-bottom: 1rem;">About Us</h2>
<p style="font-size: 1.25rem; line-height: 1.8; max-width: 800px; margin: auto;">
GameDev Hub is a platform dedicated to aspiring and professional game developers. Collaborate, learn, and
showcase your skills to the world.
</p>
<img src="me_with_ai.jpeg" alt="About us graphic"
style="margin-top: 2rem; width: 100%; max-width: 600px; border-radius: 10px;">
</section>
<!-- Games Section -->
<section id="games" style="padding: 4rem 2rem; background: #2c2c44; text-align: center;">
<h2 style="font-size: 2rem; margin-bottom: 1rem;">Our Games</h2>
<h2 style="font-size: 2rem; margin-bottom: 1rem;">Comming soon..</h2>
<!-- <div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem;">
<div
style="width: 200px; height: 200px; background: #333; display: flex; align-items: center; justify-content: center; border-radius: 10px;">
<img src="https://via.placeholder.com/200x200" alt="Game 1" style="border-radius: 10px;">
</div>
<div
style="width: 200px; height: 200px; background: #333; display: flex; align-items: center; justify-content: center; border-radius: 10px;">
<img src="https://via.placeholder.com/200x200" alt="Game 2" style="border-radius: 10px;">
</div>
<div
style="width: 200px; height: 200px; background: #333; display: flex; align-items: center; justify-content: center; border-radius: 10px;">
<img src="https://via.placeholder.com/200x200" alt="Game 3" style="border-radius: 10px;">
</div>
</div> -->
</section>
<!-- Team Section -->
<section id="team" style="padding: 4rem 2rem; text-align: center;">
<h2 style="font-size: 2rem; margin-bottom: 1rem;">Meet the Team</h2>
<p style="font-size: 1.25rem; line-height: 1.8; max-width: 800px; margin: auto;">
Our passionate team includes game designers, developers, and artists pushing the boundaries of creativity.
</p>
</section>
<!-- Contact Section -->
<section id="contact" style="padding: 4rem 2rem; background: #2c2c44; text-align: center;">
<h2 style="font-size: 2rem; margin-bottom: 1rem;">Contact Us</h2>
<form id="contactForm" style="max-width: 500px; margin: auto;">
<input type="text" name="name" placeholder="Your Name" required
style="width: 90%; padding: 1rem; margin-bottom: 1rem; border: none; border-radius: 5px;">
<input type="email" name="email" placeholder="Your Email" required
style="width: 90%; padding: 1rem; margin-bottom: 1rem; border: none; border-radius: 5px;">
<textarea name="message" placeholder="Your Message" required
style="width: 90%; padding: 1rem; margin-bottom: 1rem; border: none; border-radius: 5px;"></textarea>
<button type="submit"
style="padding: 1rem 2rem; background-color: #f90; border: none; font-size: 1rem; cursor: pointer; border-radius: 5px;">Send</button>
</form>
</section>
<!-- Footer -->
<!-- Footer -->
<footer
style="padding: 2rem; background: #111; color: #aaa; text-align: center; position: relative; border-top: 1px solid #333;">
<div style="display: flex; flex-wrap: wrap; justify-content: space-around; max-width: 1200px; margin: auto;">
<!-- About Section -->
<div style="flex: 1; min-width: 200px; margin-bottom: 1rem;">
<h4 style="color: #fff; margin-bottom: 0.5rem;">About GameDev Hub</h4>
<p style="font-size: 0.9rem; line-height: 1.5;">
GameDev Hub is your go-to platform for game development resources, tutorials, and community support.
Join us to create amazing experiences.
</p>
</div>
<!-- Quick Links -->
<div style="flex: 1; min-width: 200px; margin-bottom: 1rem;">
<h4 style="color: #fff; margin-bottom: 0.5rem;">Quick Links</h4>
<ul style="list-style: none; padding: 0;">
<li><a href="#about" style="text-decoration: none; color: #f90; font-size: 0.9rem;">About Us</a>
</li>
<li><a href="#games" style="text-decoration: none; color: #f90; font-size: 0.9rem;">Our Games</a>
</li>
<li><a href="#team" style="text-decoration: none; color: #f90; font-size: 0.9rem;">Meet the Team</a>
</li>
<li><a href="#contact" style="text-decoration: none; color: #f90; font-size: 0.9rem;">Contact</a>
</li>
</ul>
</div>
<!-- Contact Information -->
<div style="flex: 1; min-width: 200px; margin-bottom: 1rem; color: #fff;">
<h4 style="margin-bottom: 0.5rem; color: #fff;">Contact Us</h4>
<p style="font-size: 0.9rem; line-height: 1.5;">
Email: <a href="mailto:support@gamedevhub.com"
style="color: #f90; text-decoration: none;">support@gamedevhub.com</a><br>
Phone: +123 456 7890
</p>
<div style="margin-top: 1rem; display: flex; gap: 1rem; padding-left: 80px;">
<a href="#"
style="display: flex; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; align-items: center; justify-content: center;">
<img src="facebook.png" alt="Facebook" style="width: 100%; height: 100%; object-fit: cover;">
</a>
<a href="#"
style="display: flex; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; align-items: center; justify-content: center;">
<img src="twitter.png" alt="Twitter" style="width: 100%; height: 100%; object-fit: cover;">
</a>
<a href="#"
style="display: flex; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; align-items: center; justify-content: center; background-color: #fff;">
<img src="youtube.png" alt="YouTube" style="width: 80%; height: 80%; object-fit: cover;">
</a>
</div>
</div>
<!-- Newsletter Signup -->
<div style="flex: 1; min-width: 200px; margin-bottom: 1rem;">
<h4 style="color: #fff; margin-bottom: 0.5rem;">Newsletter</h4>
<p style="font-size: 0.9rem; line-height: 1.5;">
Subscribe to our newsletter to stay updated on the latest in game development!
</p>
<form id="newsletterForm" style="margin-top: 0.5rem;">
<input type="email" placeholder="Your Email" required
style="width: 80%; padding: 0.5rem; margin-bottom: 0.5rem; border: none; border-radius: 5px;">
<button type="submit"
style="padding: 0.5rem 1rem; background-color: #f90; border: none; color: #111; font-weight: bold; cursor: pointer; border-radius: 5px;">Subscribe</button>
</form>
</div>
</div>
<!-- Copyright -->
<div style="margin-top: 1rem; font-size: 0.8rem; color: #666;">
© 2024 GameDev Hub. All rights reserved. | <a href="#" style="color: #f90;">Privacy Policy</a> | <a
href="#" style="color: #f90;">Terms of Service</a>
</div>
</footer>
<script>
document.getElementById('newsletterForm').addEventListener('submit', function (e) {
e.preventDefault();
alert('Thank you for subscribing to our newsletter!');
});
</script>
</body>
</html>